<!-- 耗材申领-申领物料 -->
<template>
  <div>
    <el-row class="mt10 spn" type="flex">
      <Search :data="selections" :attribute="'createdTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
      <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
        <span class="spn">
          <el-form-item>
            <el-input v-model="searchForm.customerName" class="inputCss" placeholder="姓名、手机号、会员号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索顾客</el-button>
          </el-form-item>
        </span>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="managementList">
      <el-table-column label="病历编号" prop="no" />
      <el-table-column label="顾客" prop="customerName" align="center" />
      <el-table-column label="项目" prop="projectName" align="center" />
      <el-table-column label="病历类型" prop="medicalRecordType" align="center" />
      <el-table-column label="创建时间" prop="createdTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人员" prop="createdBy" align="center" />
      <el-table-column label="存放位置" prop="location" align="center" />
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="detailsBtn(scope.row)">详情</el-button>
          <el-button type="text" @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    <!-- 领公共物料/项目物料 -->
    <Dialog :title="title" :visible.sync="visible" :button-text="testBtn" :loading="loading" :reveal="show" @confirm="submitForm">
      <div v-if="shows">
        <el-steps v-if="flag" :active="active" align-center space="160px">
          <el-step title="选择项目" />
          <el-step title="选择物料" />
        </el-steps>
        <div>
          <el-button v-show="flag==false" @click="addMater">增加物料</el-button>
          <el-button v-show="flags&&flag" class="selectCss" @click="selectMater">选取物料</el-button>
        </div>
        <el-form v-if="flags==false" :inline="true" :model="formInline" size="mini" class="selectCss">
          <el-form-item>
            <el-input v-model="formInline.name" placeholder="请输入套餐名称" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table v-if="flags==false" v-loading="loading" :data="addMaterList">
          <el-table-column label="顾客" prop="name" />
          <el-table-column label="手机号" prop="guike" />
          <el-table-column label="项目名称" prop="name" />
          <el-table-column label="剩余次数" prop="guike" />
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button @click="selectBtn(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="flags" v-loading="loading" :data="addMaterList">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="规格" prop="guike" />
          <el-table-column label="单位" prop="danwei" />
          <el-table-column v-if="flag==false" label="库存" prop="kucun" />
          <el-table-column v-if="flag" label="已领数量" prop="kucun" />
          <el-table-column v-if="flag" label="最多可领" prop="kucun" />
          <el-table-column :label="flag?'本次领取':'领取数量'" min-width="120px">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.lqsl" controls-position="right" :min="0" @change="handleChange" />
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteBtn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="shows===false">
        <div class="headStyle">
          <span>姓名：{{ appMaters.customerName }}</span><span>性别：{{ appMaters.sex }}</span><span>年龄：{{ appMaters.age }}</span><span>项目：{{ appMaters.projectName }}</span><span>存放位置：{{ appMaters.location }}</span>
        </div>
        <!-- <el-table v-loading="loading" :data="appMaterData">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="规格" prop="guige" />
          <el-table-column label="单位" prop="danwei" />
          <el-table-column label="已领数量" prop="sykc" />
        </el-table> -->
        <div class="textarea">
          <el-input v-model="appMaters.medicalRecordContent" type="textarea" :rows="12" placeholder="病历内容" disabled />
        </div>
      </div>
    </Dialog>

  </div>
</template>
<script>
import Search from "@/components/Search";
import { selections } from "@/config";
import Dialog from "@/components/Dialog/index";
export default {
  components: {
    Search,
    Dialog,
  },
  data() {
    return {
      selections,
      searchForm: {},
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      managementList: [],
      appMaters: {},
      addMaterList: [],
      appMaterData: [],
      title: "",
      testBtn: "", // 对话框按钮名称
      visible: false, // 出库
      loading: false,
      flag: false,
      tabsOne: '',
      tabsTwo: '',
      formInline: {},
      options: [],
      nums: undefined,
      active: 1,
      flags: false, // 控制代顾客领料进度条内容
      show: false,
      shows: false,
      label: ['项目物料', '额外物料'],
    };
  },
  created() {
    this.getManagementList();
  },
  methods: {
    async getManagementList() {
      this.loading = true;
      const res = await this.$api['department/consumables/medicalrecordlist']({ ...this.params, query: this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询病历管理列表失败！');
      this.managementList = res.data.result;
      this.total = res.data.total;
      this.getUserData();
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    getUserData() {
      this.managementList.map(item => {
        item.createdBy = this.$store.getters.currentUserInfo.name; // 获取登陆人
      });
    },
    // 搜索
    searchBtn() {
      this.getManagementList();
    },
    // 领公共物料
    applyCommon() {
      this.title = "领公共物料";
      this.testBtn = "提交";
      this.flag = false;
      this.flags = true;
      this.show = true;
      this.shows = true;
      this.visible = true;
    },
    // 增加物料
    addMater() {
      this.titleTwo = "选择物料";
      this.testBtnTwo = "已选择";
      this.tabsOne = "套餐";
      this.tabsTwo = "项目";
      this.shows = true;
      this.visibleTow = true;
    },
    // 选取物料
    selectMater() {
      this.titleTwo = "代顾客领料";
      this.testBtnTwo = "提交";
      this.tabsOne = "项目物料";
      this.tabsTwo = "额外物料";
      this.shows = false;
      this.visibleTow = true;
    },
    cheackTabs(val) {
      console.log(val);
    },
    // 公共物料-搜索
    onSubmit() {
      console.log("搜索");
    },
    handleSelectionChange(e) {
      if (e.length) {
        this.nums = e.length;
        this.testBtnTwo = "已选择(" + this.nums + ")";
      }
    },
    // 领项目物料
    applyProject() {
      this.title = "代顾客领料";
      this.active = 1;
      this.flag = true;
      this.flags = false;
      this.show = false;
      this.shows = true;
      this.visible = true;
    },
    // 代顾客领药-选择
    selectBtn() {
      this.active = 2;
      this.show = true;
      this.shows = true;
      this.testBtn = "提交";
      this.flags = true;
    },
    // 详情
    async detailsBtn(row) {
      this.title = "领药详情";
      this.show = false;
      this.shows = false;
      this.visible = true;
      this.loading = true;
      const res = await this.$api['department/consumables/detailsmedicalrecord']({ id: row.id });
      this.loading = false;
      // console.log(res);
      if (res.code !== 200) return this.$message.error('获取病历详情失败！');
      const responseData = await this.$api['department/order/customer']({ name: row.customerName });
      Object.assign(res.data, responseData.data);
      this.appMaters = res.data;
    },
    // 病历-删除
    async deleteBtn(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      const res = await this.$api['department/consumables/deletemedicalrecord']({ id: row.id });
      if (res.code !== 200) return this.$message.error('删除病历失败！');
      this.$message.success('删除病历成功！');
      this.getManagementList();
    },
    handleChange(val) {
      console.log(val);
    },
    // 提交
    submitForm() {
      this.visible = false;
    },
    submitFormTwo() {
      this.visibleTow = false;
    },
    handleCloseTwo() {
      this.visibleTow = false;
      this.$refs.multipleTable.clearSelection();
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.timeType = val.timeType;
      this.searchForm.createdTime = val.createdTime;
      this.getManagementList();
    },
    handleTypeChange(val) {
      this.searchForm.timeType = val.timeType;
      this.searchForm.createdTime = val.createdTime;
      this.getManagementList();
    },
  },
};
</script>
<style lang="scss" scoped>
.selectCss {
  float: right;
  margin-bottom: 20px;
}
.textarea {
  margin-top: 15px;
}
</style>
